<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta 
    http-equiv="X-UA-Compatible" 
    content="ie=edge">
  <meta 
    name="theme-color" 
    content="#fff" 
    id="theme-color">
  <meta 
    name="description" 
    content="霜序廿的个人网站">
  <link 
    rel="icon" 
    href="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
  <title>JavaScript基础题</title>
  
    
      <meta 
        property="og:title" 
        content="JavaScript基础题">
    
    
      <meta 
        property="og:url" 
        content="https://shuangxunian.github.io/2021/06/13/basicJSProblem/index.html">
    
    
      <meta 
        property="og:img" 
        content="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg">
    
    
      <meta 
        property="og:img" 
        content="一些基础，如果感觉答案有问题请联系我">
    
    
      <meta 
        property="og:type" 
        content="article">
      <meta 
        property="og:article:published_time" 
        content="2021-06-13">
      <meta 
        property="og:article:modified_time" 
        content="2020-10-28">
      <meta 
        property="og:article:author" 
        content="霜序廿">
      
        
          <meta 
            property="og:article:tag" 
            content="js">
        
          <meta 
            property="og:article:tag" 
            content="面试">
        
      
    
  
  <script>
    function loadScript(url, cb) {
      var script = document.createElement('script');
      script.src = url;
      if (cb) script.onload = cb;
      script.async = true;
      document.body.appendChild(script);
    }
    function loadCSS(href, data, attr) {
      var sheet = document.createElement('link');
      sheet.ref = 'stylesheet';
      sheet.href = href;
      sheet.dataset[data] = attr;
      document.head.appendChild(sheet);
    }
    function changeCSS(cssFile, data, attr) {
      var oldlink = document.querySelector(data);
      var newlink = document.createElement("link");
      newlink.setAttribute("rel", "stylesheet");
      newlink.setAttribute("href", cssFile);
      newlink.dataset.prism = attr;
      document.head.replaceChild(newlink, oldlink);
    }
  </script>
  
    
      
      
      
      
        
        
        
        <script>
          function prismThemeChange() {
            if(document.getElementById('theme-color').dataset.mode === 'dark') {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism-tomorrow.min.css', '[data-prism]', 'prism-tomorrow');
              } else {
                loadCSS('/js/lib/prism/prism-tomorrow.min.css', 'prism', 'prism-tomorrow');
              }
            } else {
              if(document.querySelector('[data-prism]')) {
                changeCSS('/js/lib/prism/prism.min.css', '[data-prism]', 'prism');
              } else {
                loadCSS('/js/lib/prism/prism.min.css', 'prism', 'prism');
              }
            }
          }
          prismThemeChange()
        </script>
      
      
        
        <link rel="stylesheet" href="/js/lib/prism/prism-line-numbers.min.css">
      
    
  
  <script>
    // control reverse button
    var reverseDarkList = {
      dark: 'light',
      light: 'dark'
    };
    var themeColor = {
      dark: '#1c1c1e',
      light: '#fff'
    }
    // get the data of css prefers-color-scheme
    var getCssMediaQuery = function() {
      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    };
    // reverse current darkmode setting function
    var reverseDarkModeSetting = function() {
      var setting = localStorage.getItem('user-color-scheme');
      if(reverseDarkList[setting]) {
        setting = reverseDarkList[setting];
      } else if(setting === null) {
        setting = reverseDarkList[getCssMediaQuery()];
      } else {
        return;
      }
      localStorage.setItem('user-color-scheme', setting);
      return setting;
    };
    // apply current darkmode setting
  </script>
  
    <script>
      var setDarkmode = function(mode) {
      var setting = mode || localStorage.getItem('user-color-scheme');
      if(setting === getCssMediaQuery()) {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else if(reverseDarkList[setting]) {
        document.documentElement.setAttribute('data-user-color-scheme', setting);
        document.getElementById('theme-color').content = themeColor[setting];
        document.getElementById('theme-color').dataset.mode = setting;
        prismThemeChange();
      } else {
        document.documentElement.removeAttribute('data-user-color-scheme');
        localStorage.removeItem('user-color-scheme');
        document.getElementById('theme-color').content = themeColor[getCssMediaQuery()];
        document.getElementById('theme-color').dataset.mode = getCssMediaQuery();
        prismThemeChange();
      }
    };
    setDarkmode();
    </script>
  
  
  <link rel="preload" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css" as="style" >
  <link rel="preload" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.js" as="script">
    <link rel="preload" href="/js/lib/lightbox/baguetteBox.min.css" as="style" >
  
  
    <link rel="preload" href="/js/lib/lozad.min.js" as="script">
  
  
  
  
  
  
  
  <link rel="stylesheet" href="/css/main.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1946621_i1kgafibvw.css">
  
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1952792_89b4ac4k4up.css">
  
    <link rel="stylesheet" href="/js/lib/lightbox/baguetteBox.min.css">
  
<meta name="generator" content="Hexo 5.4.0"></head>

  <body>
    <div class="wrapper">
       
      <nav class="navbar">
  <div class="navbar-logo">
    <span class="navbar-logo-main">
      
        <img 
          class="navbar-logo-img" 
          src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
          alt="blog logo">
      
      <span class="navbar-logo-dsc">霜序廿的个人网站</span>
    </span>
  </div>
  <div class="navbar-menu">
    
      <a 
        href="/" 
        class="navbar-menu-item">
        
          首页
        
      </a>
    
      <a 
        href="/archives" 
        class="navbar-menu-item">
        
          归档
        
      </a>
    
      <a 
        href="/tags" 
        class="navbar-menu-item">
        
          标签
        
      </a>
    
      <a 
        href="/categories" 
        class="navbar-menu-item">
        
          分类
        
      </a>
    
      <a 
        href="/about" 
        class="navbar-menu-item">
        
          关于
        
      </a>
    
      <a 
        href="/links" 
        class="navbar-menu-item">
        
          友链
        
      </a>
    
    <a 
      class="navbar-menu-item darknavbar" 
      id="dark">
      <i class="iconfont icon-weather"></i>
    </a>
    <a 
      class="navbar-menu-item searchnavbar" 
      id="search">
      <i 
        class="iconfont icon-search" 
        style="font-size: 1.2rem; font-weight: 400;">
      </i>
    </a>
  </div>
</nav> 
      
      <div 
        id="local-search" 
        style="display: none">
        <input
          class="navbar-menu-item"
          id="search-input"
          placeholder="请输入搜索内容..." />
        <div id="search-content"></div>
      </div>
      
      <div class="section-wrap">
        <div class="container">
          <div class="columns">
            <main class="main-column">
<article class="card card-content">
  <header>
    <h1 class="post-title">
      JavaScript基础题
    </h1>
  </header>
  <div class="post-meta post-show-meta">
    <time datetime="2021-06-13T13:48:55.963Z">
      <i 
        class="iconfont icon-calendar" 
        style="margin-right: 2px;">
      </i>
      <span>2021-06-13</span>
    </time>
    
      <span class="dot"></span>
      
        <a 
          href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/" 
          class="post-meta-link">
          技术文章
        </a>
      
    
    
      <span class="dot"></span>
      <span>6.7k 字</span>
    
  </div>
  
    <div 
      class="post-meta post-show-meta" 
      style="margin-top: -10px;">
      <div style="display: flex; align-items: center;">
        <i 
          class="iconfont icon-biaoqian" 
          style="margin-right: 2px; font-size: 1.15rem;">
        </i>
        
          
          <a 
            href="/tags/js/" 
            class="post-meta-link">
            js
          </a>
        
          
            <span class="dot"></span>
          
          <a 
            href="/tags/%E9%9D%A2%E8%AF%95/" 
            class="post-meta-link">
            面试
          </a>
        
      </div>
    </div>
  
  </header>
  <div 
    id="section" 
    class="post-content">
    <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>从网上到处整理的一些基础题，可能有部分题因为改版答案出问题，如果感觉答案有问题请联系我</p>
<h2 id="介绍JavaScript的基本数据类型"><a href="#介绍JavaScript的基本数据类型" class="headerlink" title="介绍JavaScript的基本数据类型"></a>介绍JavaScript的基本数据类型</h2><p>值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。<br>引用数据类型：对象(Object)、数组(Array)、函数(Function)。<br>注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。</p>
<h2 id="说说写JavaScript的基本规范？"><a href="#说说写JavaScript的基本规范？" class="headerlink" title="说说写JavaScript的基本规范？"></a>说说写JavaScript的基本规范？</h2><ol>
<li>不要在同一行声明多个变量</li>
<li>使用 ===或!==来比较true/false或者数值</li>
<li>switch必须带有default分支</li>
<li>函数应该有返回值</li>
<li>for if else 必须使用大括号</li>
<li>语句结束加分号</li>
<li>命名要有意义，使用驼峰命名法</li>
</ol>
<h2 id="jQuery使用建议"><a href="#jQuery使用建议" class="headerlink" title="jQuery使用建议"></a>jQuery使用建议</h2><ol>
<li>尽量减少对dom元素的访问和操作</li>
<li>尽量避免给dom元素绑定多个相同类型的事件处理函数，可以将多个相同类型事件处理函数合并到一个处理函数，通过数据状态来处理分支</li>
<li>尽量避免使用toggle事件</li>
</ol>
<h2 id="Ajax使用"><a href="#Ajax使用" class="headerlink" title="Ajax使用"></a>Ajax使用</h2><p>全称 ： Asynchronous Javascript And XML<br>所谓异步，就是向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。<br>创建Ajax的过程：</p>
<ol>
<li><p>创建XMLHttpRequest对象（异步调用对象）</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p>创建新的Http请求（方法、URL、是否异步）</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'get'</span><span class="token punctuation">,</span><span class="token string">'example.php'</span><span class="token punctuation">,</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p>设置响应HTTP请求状态变化的函数。<br>onreadystatechange事件中readyState属性等于4。响应的HTTP状态为200(OK)或者304(Not Modified)。</p>
</li>
<li><p>发送http请求</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li>
<li><p>获取异步调用返回的数据</p>
</li>
</ol>
<p><strong>注意：</strong></p>
<ol>
<li>页面初次加载时，尽量在web服务器一次性输出所有相关的数据，只在页面加载完成之后，用户进行操作时采用ajax进行交互。</li>
<li>同步ajax在IE上会产生页面假死的问题。所以建议采用异步ajax。</li>
<li>尽量减少ajax请求次数</li>
<li>ajax安全问题，对于敏感数据在服务器端处理，避免在客户端处理过滤。对于关键业务逻辑代码也必须放在服务器端处理。</li>
</ol>
<h2 id="JavaScript有几种类型的值？你能画一下他们的内存图吗？"><a href="#JavaScript有几种类型的值？你能画一下他们的内存图吗？" class="headerlink" title="JavaScript有几种类型的值？你能画一下他们的内存图吗？"></a>JavaScript有几种类型的值？你能画一下他们的内存图吗？</h2><p>基本数据类型存储在栈中，引用数据类型（对象）存储在堆中，指针放在栈中。<br>两种类型的区别是：存储位置不同；原始数据类型直接存储在栈中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；引用数据类型存储在堆中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能<br>引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。</p>
<h2 id="栈和堆的区别？"><a href="#栈和堆的区别？" class="headerlink" title="栈和堆的区别？"></a>栈和堆的区别？</h2><p>栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；<br>堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。</p>
<h2 id="Javascript作用链域"><a href="#Javascript作用链域" class="headerlink" title="Javascript作用链域"></a>Javascript作用链域</h2><p>作用域链的原理和原型链很类似，如果这个变量在自己的作用域中没有，那么它会寻找父级的，直到最顶层。<br>注意：JS没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。</p>
<h2 id="谈谈this的理解"><a href="#谈谈this的理解" class="headerlink" title="谈谈this的理解"></a>谈谈this的理解</h2><ol>
<li>this总是指向函数的直接调用者（而非间接调用者）</li>
<li>如果有new关键字，this指向new出来的那个对象</li>
<li>在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。</li>
</ol>
<h2 id="eval是做什么的？"><a href="#eval是做什么的？" class="headerlink" title="eval是做什么的？"></a>eval是做什么的？</h2><p>它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。</p>
<h2 id="什么是window对象-什么是document对象"><a href="#什么是window对象-什么是document对象" class="headerlink" title="什么是window对象? 什么是document对象?"></a>什么是window对象? 什么是document对象?</h2><p>window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。</p>
<h2 id="null，undefined的区别？"><a href="#null，undefined的区别？" class="headerlink" title="null，undefined的区别？"></a>null，undefined的区别？</h2><p>null表示一个对象被定义了，但存放了空指针，转换为数值时为0。<br>undefined表示声明的变量未初始化，转换为数值时为NAN。<br>typeof(null) – object;<br>typeof(undefined) – undefined</p>
<h2 id="关于事件，IE与火狐的事件机制有什么区别？-如何阻止冒泡？"><a href="#关于事件，IE与火狐的事件机制有什么区别？-如何阻止冒泡？" class="headerlink" title="关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？"></a>关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？</h2><p>IE为事件冒泡，Firefox同时支持事件捕获和事件冒泡。但并非所有浏览器都支持事件捕获。jQuery中使用event.stopPropagation()方法可阻止冒泡;<br>旧IE的方法 ev.cancelBubble = true;</p>
<h2 id="什么是闭包（closure），为什么要用它？"><a href="#什么是闭包（closure），为什么要用它？" class="headerlink" title="什么是闭包（closure），为什么要用它？"></a>什么是闭包（closure），为什么要用它？</h2><p>闭包指的是一个函数可以访问另一个函数作用域中变量。常见的构造方法，是在一个函数内部定义另外一个函数。内部函数可以引用外层的变量；外层变量不会被垃圾回收机制回收。<br>注意，闭包的原理是作用域链，所以闭包访问的上级作用域中的变量是个对象，其值为其运算结束后的最后一个值。<br>优点：避免全局变量污染。缺点：容易造成内存泄漏。<br>例子：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">makeFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">"Mozilla"</span><span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">displayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">return</span> displayName<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">var</span> myFunc <span class="token operator">=</span> <span class="token function">makeFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">myFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//输出Mozilla</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>myFunc 变成一个 闭包。闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。在我们的例子中，myFunc 是一个闭包，由 displayName 函数和闭包创建时存在的 “Mozilla” 字符串形成。</p>
<h2 id="javascript-代码中的”use-strict”-是什么意思-使用它区别是什么？"><a href="#javascript-代码中的”use-strict”-是什么意思-使用它区别是什么？" class="headerlink" title="javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？"></a>javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</h2><p>除了正常模式运行外，ECMAscript添加了第二种运行模式：“严格模式”。<br>作用：</p>
<ol>
<li>消除js不合理，不严谨地方，减少怪异行为</li>
<li>消除代码运行的不安全之处，</li>
<li>提高编译器的效率，增加运行速度</li>
<li>为未来的js新版本做铺垫。</li>
</ol>
<h2 id="如何判断一个对象是否属于某个类？"><a href="#如何判断一个对象是否属于某个类？" class="headerlink" title="如何判断一个对象是否属于某个类？"></a>如何判断一个对象是否属于某个类？</h2><p>使用instanceof 即</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">if</span><span class="token punctuation">(</span>a <span class="token keyword">instanceof</span> <span class="token class-name">Person</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'yes'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h2 id="new操作符具体干了什么呢"><a href="#new操作符具体干了什么呢" class="headerlink" title="new操作符具体干了什么呢?"></a>new操作符具体干了什么呢?</h2><ol>
<li>创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。</li>
<li>属性和方法被加入到 this 引用的对象中。</li>
<li>新创建的对象由 this 所引用，并且最后隐式的返回 this 。</li>
</ol>
<h2 id="Javascript中，执行时对象查找时，永远不会去查找原型的函数？"><a href="#Javascript中，执行时对象查找时，永远不会去查找原型的函数？" class="headerlink" title="Javascript中，执行时对象查找时，永远不会去查找原型的函数？"></a>Javascript中，执行时对象查找时，永远不会去查找原型的函数？</h2><p>Object.hasOwnProperty(proName)：是用来判断一个对象是否有你给出名称的属性。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。</p>
<h2 id="对JSON的了解？"><a href="#对JSON的了解？" class="headerlink" title="对JSON的了解？"></a>对JSON的了解？</h2><p>全称：JavaScript Object Notation<br>JSON中对象通过“{}”来标识，一个“{}”代表一个对象，如{“AreaId”:”123”}，对象的值是键值对的形式（key：value）。JSON是JS的一个严格的子集，一种轻量级的数据交换格式，类似于xml。数据格式简单，易于读写，占用带宽小。<br>两个函数：<br>JSON.parse(str)<br>解析JSON字符串 把JSON字符串变成JavaScript值或对象<br>JSON.stringify(obj)<br>将一个JavaScript值(对象或者数组)转换为一个 JSON字符串<br>eval(‘(‘＋json＋’)’)<br>用eval方法注意加括号 而且这种方式更容易被攻击</p>
<h2 id="JS延迟加载的方式有哪些？"><a href="#JS延迟加载的方式有哪些？" class="headerlink" title="JS延迟加载的方式有哪些？"></a>JS延迟加载的方式有哪些？</h2><p>JS的延迟加载有助与提高页面的加载速度。<br>defer和async、动态创建DOM方式（用得最多）、按需异步载入JS<br>defer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。<br>async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。</p>
<h2 id="同步和异步的区别"><a href="#同步和异步的区别" class="headerlink" title="同步和异步的区别?"></a>同步和异步的区别?</h2><p>同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。<br>同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。<br>异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。</p>
<h2 id="页面编码和被请求的资源编码如果不一致如何处理？"><a href="#页面编码和被请求的资源编码如果不一致如何处理？" class="headerlink" title="页面编码和被请求的资源编码如果不一致如何处理？"></a>页面编码和被请求的资源编码如果不一致如何处理？</h2><p>若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset=”utf-8”或”gbk”。<br>比如：<a target="_blank" rel="noopener" href="http://www.yyy.com/a.html">http://www.yyy.com/a.html</a> 中嵌入了一个<a target="_blank" rel="noopener" href="http://www.xxx.com/test.js">http://www.xxx.com/test.js</a><br>a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"http://www.xxx.com/test.js&amp;quot; charset="</span>utf<span class="token operator">-</span><span class="token number">8</span>"<span class="token operator">></span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h2 id="模块化开发怎么做？"><a href="#模块化开发怎么做？" class="headerlink" title="模块化开发怎么做？"></a>模块化开发怎么做？</h2><p>模块化开发指的是在解决某一个复杂问题或者一系列问题时，依照一种分类的思维把问题进行系统性的分解。模块化是一种将复杂系统分解为代码结构更合理，可维护性更高的可管理的模块方式。对于软件行业：系统被分解为一组高内聚，低耦合的模块。</p>
<ol>
<li>定义封装的模块</li>
<li>定义新模块对其他模块的依赖</li>
<li>可对其他模块的引入支持。在JavaScript中出现了一些非传统模块开发方式的规范。 CommonJS的模块规范，AMD（Asynchronous Module Definition），CMD（Common Module Definition）等。AMD是异步模块定义，所有的模块将被异步加载，模块加载不影响后边语句运行。</li>
</ol>
<h2 id="AMD（Modules-Asynchronous-Definition）、CMD（Common-Module-Definition）规范区别？"><a href="#AMD（Modules-Asynchronous-Definition）、CMD（Common-Module-Definition）规范区别？" class="headerlink" title="AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？"></a>AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</h2><p>AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。<br>区别：</p>
<ol>
<li>对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。</li>
<li>CMD 推崇依赖就近，AMD 推崇依赖前置。</li>
<li>AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// CMD</span>
<span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">require<span class="token punctuation">,</span> exports<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./a'</span><span class="token punctuation">)</span>
    a<span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment">// 此处略去 100 行</span>
    <span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./b'</span><span class="token punctuation">)</span> <span class="token comment">// 依赖可以就近书写</span>
    b<span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span>
<span class="token comment">// AMD 默认推荐</span>
<span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'./a'</span><span class="token punctuation">,</span> <span class="token string">'./b'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> <span class="token comment">// 依赖必须一开始就写好</span>
    a<span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 此处略去 100 行</span>
    b<span class="token punctuation">.</span><span class="token function">doSomething</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
</ol>
<h2 id="requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）"><a href="#requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）" class="headerlink" title="requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）"></a>requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）</h2><p>核心是js的加载模块，通过正则匹配模块以及模块的依赖关系，保证文件加载的先后顺序，根据文件的路径对加载过的文件做了缓存。</p>
<h2 id="call和apply"><a href="#call和apply" class="headerlink" title="call和apply"></a>call和apply</h2><p>call（）方法和apply（）方法的作用相同，动态改变某个类的某个方法的运行环境。他们的区别在于接收参数的方式不同。在使用call（）方法时，传递给函数的参数必须逐个列举出来。使用apply（）时，传递给函数的是参数数组。</p>
<h2 id="documen-write和-innerHTML的区别"><a href="#documen-write和-innerHTML的区别" class="headerlink" title="documen.write和 innerHTML的区别"></a>documen.write和 innerHTML的区别</h2><p>document.write()只能重绘整个页面</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
       document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'&lt;p>5 secs later&lt;/p>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">5000</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p>或</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"HI"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p>innerHTML可以重绘页面的一部分</p>
<h2 id="回流与重绘"><a href="#回流与重绘" class="headerlink" title="回流与重绘"></a>回流与重绘</h2><p>当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树。完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘</p>
<h2 id="DOM操作"><a href="#DOM操作" class="headerlink" title="DOM操作"></a>DOM操作</h2><ol>
<li>创建新节点<br>createDocumentFragment() //创建一个DOM片段<br>createElement() //创建一个具体的元素<br>createTextNode() //创建一个文本节点</li>
<li>添加、移除、替换、插入<br>appendChild()<br>removeChild()<br>replaceChild()<br>insertBefore() //在已有的子节点前插入一个新的子节点</li>
<li>查找<br>getElementsByTagName() //通过标签名称<br>getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)<br>getElementById() //通过元素Id，唯一性</li>
</ol>
<h2 id="数组对象有哪些原生方法，列举一下"><a href="#数组对象有哪些原生方法，列举一下" class="headerlink" title="数组对象有哪些原生方法，列举一下"></a>数组对象有哪些原生方法，列举一下</h2><p>pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight<br>forEach、map、filter、every、some</p>
<h2 id="那些操作会造成内存泄漏"><a href="#那些操作会造成内存泄漏" class="headerlink" title="那些操作会造成内存泄漏"></a>那些操作会造成内存泄漏</h2><p>全局变量、闭包、DOM清空或删除时，事件未清除、子元素存在引用</p>
<h2 id="什么是Cookie-隔离？（或者：请求资源的时候不要带cookie怎么做）"><a href="#什么是Cookie-隔离？（或者：请求资源的时候不要带cookie怎么做）" class="headerlink" title="什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）"></a>什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）</h2><p>通过使用多个非主要域名来请求静态文件，如果静态文件都放在主域名下，那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的，还不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入server，也减少了server对cookie的处理分析环节，提高了server的http请求的解析速度。</p>
<h2 id="响应事件"><a href="#响应事件" class="headerlink" title="响应事件"></a>响应事件</h2><p>onclick鼠标点击某个对象；onfocus获取焦点；onblur失去焦点；onmousedown鼠标被按下</p>
<h2 id="flash和js通过什么类如何交互"><a href="#flash和js通过什么类如何交互" class="headerlink" title="flash和js通过什么类如何交互?"></a>flash和js通过什么类如何交互?</h2><p>Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。</p>
<h2 id="Flash与Ajax各自的优缺点？"><a href="#Flash与Ajax各自的优缺点？" class="headerlink" title="Flash与Ajax各自的优缺点？"></a>Flash与Ajax各自的优缺点？</h2><p>Flash：适合处理多媒体、矢量图形、访问机器。但对css、处理文本不足，不容易被搜索。<br>Ajax：对css、文本支持很好，但对多媒体、矢量图形、访问机器不足。</p>
<h2 id="有效的javascript变量定义规则"><a href="#有效的javascript变量定义规则" class="headerlink" title="有效的javascript变量定义规则"></a>有效的javascript变量定义规则</h2><p>第一个字符必须是一个字母、下划线（_）或一个美元符号（$）；其他字符可以是字母、下划线、美元符号或数字。</p>
<h2 id="XML与JSON的区别？"><a href="#XML与JSON的区别？" class="headerlink" title="XML与JSON的区别？"></a>XML与JSON的区别？</h2><ol>
<li>数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。</li>
<li>数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。</li>
<li>数据描述方面。JSON对数据的描述性比XML较差。</li>
<li>传输速度方面。JSON的速度要远远快于XML。</li>
</ol>
<h2 id="HTML与XML的区别？"><a href="#HTML与XML的区别？" class="headerlink" title="HTML与XML的区别？"></a>HTML与XML的区别？</h2><ol>
<li>XML用来传输和存储数据，HTML用来显示数据；</li>
<li>XML使用的标签不用预先定义</li>
<li>XML标签必须成对出现</li>
<li>XML对大小写敏感</li>
<li>XML中空格不会被删减</li>
<li>XML中所有特殊符号必须用编码表示</li>
<li>XML中的图片必须有文字说明</li>
</ol>
<h2 id="渐进增强与优雅降级"><a href="#渐进增强与优雅降级" class="headerlink" title="渐进增强与优雅降级"></a>渐进增强与优雅降级</h2><p>渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进，达到更好的用户体验。<br>优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。</p>
<h2 id="Web-Worker和Web-Socket？"><a href="#Web-Worker和Web-Socket？" class="headerlink" title="Web Worker和Web Socket？"></a>Web Worker和Web Socket？</h2><p>web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。<br>web worker：运行在后台的JavaScript，不影响页面的性能。<br>创建worker：var worker = new Worker(url);<br>向worker发送数据：worker.postMessage(data);<br>接收worker返回的数据：worker.onmessage<br>终止一个worker的执行：worker.terminate();</p>
<h2 id="JS垃圾回收机制？"><a href="#JS垃圾回收机制？" class="headerlink" title="JS垃圾回收机制？"></a>JS垃圾回收机制？</h2><ol>
<li>标记清除：<br>这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。<br>这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。定期的，垃圾回收器将从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象。从根开始，垃圾回收器将找到所有可以获得的对象和所有不能获得的对象。</li>
<li>引用计数：<br>这是最简单的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。<br>该算法有个限制：无法处理循环引用。两个对象被创建，并互相引用，形成了一个循环。它们被调用之后不会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。</li>
</ol>
<h2 id="web应用从服务器主动推送data到客户端的方式？"><a href="#web应用从服务器主动推送data到客户端的方式？" class="headerlink" title="web应用从服务器主动推送data到客户端的方式？"></a>web应用从服务器主动推送data到客户端的方式？</h2><p>JavaScript数据推送：commet（基于http长连接的服务器推送技术）。<br>基于web socket的推送：SSE（server-send Event）</p>
<h2 id="如何删除一个cookie？"><a href="#如何删除一个cookie？" class="headerlink" title="如何删除一个cookie？"></a>如何删除一个cookie？</h2><ol>
<li>将cookie的失效时间设置为过去的时间（expires）<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">document<span class="token punctuation">.</span>cookie <span class="token operator">=</span> ‘user<span class="token operator">=</span>’<span class="token operator">+</span> <span class="token function">encodeURIComponent</span><span class="token punctuation">(</span>‘name’<span class="token punctuation">)</span> <span class="token operator">+</span> '<span class="token punctuation">;</span>
expires<span class="token operator">=</span>’<span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li>
<li>将系统时间设置为当前时间往前一点时间<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
date<span class="token punctuation">.</span><span class="token function">setDate</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li>
</ol>
<h2 id="attribute与property的区别？"><a href="#attribute与property的区别？" class="headerlink" title="attribute与property的区别？"></a>attribute与property的区别？</h2><p>attribute是dom元素在文档中作为html标签拥有的属性<br>property是dom元素在js中作为对象拥有的属性。<br>所以，对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但对于自定义属性，他们不同步。</p>
<h2 id="Ajax请求的页面历史记录状态问题？"><a href="#Ajax请求的页面历史记录状态问题？" class="headerlink" title="Ajax请求的页面历史记录状态问题？"></a>Ajax请求的页面历史记录状态问题？</h2><ol>
<li>通过location.hash记录状态，让浏览器记录Ajax请求时页面状态的变化。</li>
<li>通过HTML5的history.pushstate，来实现浏览器地址栏的无刷新改变。</li>
</ol>
<h2 id="防抖节流"><a href="#防抖节流" class="headerlink" title="防抖节流"></a>防抖节流</h2><p><strong>防抖</strong><br>触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间<br>思路：<br>每次触发事件时都取消之前的延时调用方法</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">let</span> timeout <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span> <span class="token comment">// 创建一个标记用来存放定时器的返回值</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timeout<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 每当用户输入的时候把前一个 setTimeout clear 掉</span>
        timeout <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span>
            <span class="token comment">// 然后又创建一个新的 setTimeout,</span>
            <span class="token comment">// 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话</span>
            <span class="token comment">// 就不会执行 fn 函数</span>
            <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'防抖成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token keyword">var</span> inp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'inp'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
inp<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'input'</span><span class="token punctuation">,</span> <span class="token function">debounce</span><span class="token punctuation">(</span>sayHi<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 防抖</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p><strong>节流</strong><br>高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率<br>思路：<br>每次触发事件时都判断当前是否有等待执行的延时函数</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span><span class="token parameter">fn</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    <span class="token keyword">let</span> canRun <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">// 通过闭包保存一个标记</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>canRun<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// 在函数开头判断标记是否为true，不为true则return</span>
        canRun <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token comment">// 立即设置为false</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">&#123;</span> <span class="token comment">// 将外部传入的函数的执行放在setTimeout中</span>
            <span class="token function">fn</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">// 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。</span>
            <span class="token comment">// 当定时器没有执行的时候标记永远是false，在开头被return掉</span>
            canRun <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token keyword">function</span> <span class="token function">sayHi</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerWidth<span class="token punctuation">,</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> <span class="token function">throttle</span><span class="token punctuation">(</span>sayHi<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="模块化发展历程"><a href="#模块化发展历程" class="headerlink" title="模块化发展历程"></a>模块化发展历程</h2><p>可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、&lt;script type=”module”&gt; 这几个角度考虑。<br>模块化主要是用来抽离公共代码，隔离作用域，避免变量冲突等。<br><strong>IIFE：</strong> 使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
  <span class="token keyword">return</span> <span class="token punctuation">&#123;</span>
    data<span class="token operator">:</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p><strong>AMD：</strong> 使用requireJS 来编写模块化，特点：依赖必须提前声明好。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">define</span><span class="token punctuation">(</span><span class="token string">'./index.js'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token comment">// code 就是index.js 返回的内容</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p><strong>CMD：</strong> 使用seaJS 来编写模块化，特点：支持动态引入依赖文件。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">define</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">require<span class="token punctuation">,</span> exports<span class="token punctuation">,</span> module</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>  
  <span class="token keyword">var</span> indexCode <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./index.js'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p><strong>CommonJS：</strong> nodejs 中自带的模块化。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
<p><strong>UMD：</strong>兼容AMD，CommonJS 模块化语法。<br><strong>webpack(require.ensure)：</strong>webpack 2.x 版本中的代码分割。<br><strong>ES Modules：</strong> ES6 引入的模块化，支持import 来引入另一个 js 。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">import</span> a <span class="token keyword">from</span> <span class="token string">'a'</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<h2 id="npm-模块安装机制："><a href="#npm-模块安装机制：" class="headerlink" title="npm 模块安装机制："></a>npm 模块安装机制：</h2><ul>
<li>发出npm install命令</li>
<li>查询node_modules目录之中是否已经存在指定模块</li>
<li>若存在，不再重新安装</li>
<li>若不存在<ul>
<li>npm 向 registry 查询模块压缩包的网址</li>
<li>下载压缩包，存放在根目录下的.npm目录里</li>
<li>解压压缩包到当前项目的node_modules目录</li>
</ul>
</li>
</ul>
<h2 id="npm-实现原理"><a href="#npm-实现原理" class="headerlink" title="npm 实现原理"></a>npm 实现原理</h2><p>输入 npm install 命令并敲下回车后，会经历如下几个阶段（以 npm 5.5.1 为例）：</p>
<ol>
<li><strong>执行工程自身 preinstall</strong>，当前 npm 工程如果定义了 preinstall 钩子此时会被执行。</li>
<li><strong>确定首层依赖模块</strong>，首先需要做的是确定工程中的首层依赖，也就是 dependencies 和 devDependencies 属性中直接指定的模块（假设此时没有添加 npm install 参数）。工程本身是整棵依赖树的根节点，每个首层依赖模块都是根节点下面的一棵子树，npm 会开启多进程从每个首层依赖模块开始逐步寻找更深层级的节点。</li>
<li><strong>获取模块</strong>，获取模块是一个递归的过程，分为以下几步：<ul>
<li>获取模块信息。在下载一个模块之前，首先要确定其版本，这是因为 package.json 中往往是 semantic version（semver，语义化版本）。此时如果版本描述文件（npm-shrinkwrap.json 或 package-lock.json）中有该模块信息直接拿即可，如果没有则从仓库获取。如 packaeg.json 中某个包的版本是 ^1.1.0，npm 就会去仓库中获取符合 1.x.x 形式的最新版本。</li>
<li>获取模块实体。上一步会获取到模块的压缩包地址（resolved 字段），npm 会用此地址检查本地缓存，缓存中有就直接拿，如果没有则从仓库下载。</li>
<li>查找该模块依赖，如果有依赖则回到第1步，如果没有则停止。</li>
</ul>
</li>
<li><strong>模块扁平化（dedupe）</strong>，上一步获取到的是一棵完整的依赖树，其中可能包含大量重复模块。比如 A 模块依赖于 loadsh，B 模块同样依赖于 lodash。在 npm3 以前会严格按照依赖树的结构进行安装，因此会造成模块冗余。从 npm3 开始默认加入了一个 dedupe 的过程。它会遍历所有节点，逐个将模块放在根节点下面，也就是 node-modules 的第一层。当发现有重复模块时，则将其丢弃。<br>这里需要对重复模块进行一个定义，它指的是模块名相同且 semver 兼容。每个 semver 都对应一段版本允许范围，如果两个模块的版本允许范围存在交集，那么就可以得到一个兼容版本，而不必版本号完全一致，这可以使更多冗余模块在 dedupe 过程中被去掉。<br>比如 node-modules 下 foo 模块依赖 lodash@^1.0.0，bar 模块依赖 lodash@^1.1.0，则 ^1.1.0为兼容版本。<br>而当 foo 依赖 lodash@^2.0.0，bar 依赖 lodash@^1.1.0，则依据 semver 的规则，二者不存在兼容版本。会将一个版本放在 node_modules 中，另一个仍保留在依赖树里。</li>
<li><strong>安装模块</strong>，这一步将会更新工程中的 node_modules，并执行模块中的生命周期函数（按照 preinstall、install、postinstall 的顺序）。</li>
<li><strong>执行工程自身生命周期</strong>，当前 npm 工程如果定义了钩子此时会被执行（按照 install、postinstall、prepublish、prepare 的顺序）。最后一步是生成或更新版本描述文件，npm install 过程完成。</li>
</ol>
<h2 id="ES5的继承和ES6的继承有什么区别？"><a href="#ES5的继承和ES6的继承有什么区别？" class="headerlink" title="ES5的继承和ES6的继承有什么区别？"></a>ES5的继承和ES6的继承有什么区别？</h2><p>ES5的继承时通过prototype或构造函数机制来实现。ES5的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到this上（Parent.apply(this)）。<br>ES6的继承机制完全不同，实质上是先创建父类的实例对象this（所以必须先调用父类的super()方法），然后再用子类的构造函数修改this。<br>具体的：ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其进行加工。如果不调用super方法，子类得不到this对象。<br>ps：super关键字指代父类的实例，即父类的this对象。在子类构造函数中，调用super后，才可使用this关键字，否则报错。</p>
<h2 id="定时器的执行顺序或机制？"><a href="#定时器的执行顺序或机制？" class="headerlink" title="定时器的执行顺序或机制？"></a>定时器的执行顺序或机制？</h2><p>因为js是单线程的，浏览器遇到setTimeout或者setInterval会先执行完当前的代码块，在此之前会把定时器推入浏览器的待执行事件队列里面，等到浏览器执行完当前代码之后会看一下事件队列里面有没有任务，有的话才执行定时器的代码。所以即使把定时器的时间设置为0还是会先执行当前的一些代码。</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    <span class="token keyword">var</span> aa <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> testSet <span class="token operator">=</span> <span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
        aa<span class="token operator">++</span><span class="token punctuation">;</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">123</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>aa<span class="token operator">&lt;</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
            <span class="token function">clearInterval</span><span class="token punctuation">(</span>testSet<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">&#125;</span>
    <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">var</span> testSet1 <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">321</span><span class="token punctuation">)</span>
  <span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span>i<span class="token operator">&lt;</span><span class="token number">10</span><span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">&#123;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'test'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token comment">//输出结果：</span>
<span class="token comment">// test 10次</span>
<span class="token comment">// undefined</span>
<span class="token comment">// 123</span>
<span class="token comment">// 321</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h2><p><a target="_blank" rel="noopener" href="https://segmentfault.com/a/1190000015288700">50道JavaScript基础面试题（附答案）</a></p>

  </div>
  <div>
    
  </div>
</article>
<div class="nav">
  
    <div class="nav-item-prev">
      <a 
        href="/2021/06/13/basicVueProblem/" 
        class="nav-link">
        <i class="iconfont icon-left nav-prev-icon"></i>
        <div>
          <div class="nav-label">上一篇</div>
          
            <div class="nav-title">Vue高频面试题 </div>
          
        </div>
      </a>
    </div>
  
  
    <div class="nav-item-next">
      <a 
        href="/2021/06/13/basicHTTPProblem/" 
        class="nav-link">
        <div>
          <div class="nav-label">下一篇</div>
          
            <div class="nav-title">HTTP基础题 </div>
          
        </div>
        <i class="iconfont icon-right nav-next-icon"></i>
      </a>
    </div>
  
</div>

<div 
  class="card card-content toc-card" 
  id="mobiletoc">
  <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8DJavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">介绍JavaScript的基本数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B4%E8%AF%B4%E5%86%99JavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A7%84%E8%8C%83%EF%BC%9F"><span class="toc-text">说说写JavaScript的基本规范？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jQuery%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE"><span class="toc-text">jQuery使用建议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E4%BD%BF%E7%94%A8"><span class="toc-text">Ajax使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E6%9C%89%E5%87%A0%E7%A7%8D%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%80%BC%EF%BC%9F%E4%BD%A0%E8%83%BD%E7%94%BB%E4%B8%80%E4%B8%8B%E4%BB%96%E4%BB%AC%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%BE%E5%90%97%EF%BC%9F"><span class="toc-text">JavaScript有几种类型的值？你能画一下他们的内存图吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E5%92%8C%E5%A0%86%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">栈和堆的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%BD%9C%E7%94%A8%E9%93%BE%E5%9F%9F"><span class="toc-text">Javascript作用链域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%88%E8%B0%88this%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-text">谈谈this的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#eval%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F"><span class="toc-text">eval是做什么的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFwindow%E5%AF%B9%E8%B1%A1-%E4%BB%80%E4%B9%88%E6%98%AFdocument%E5%AF%B9%E8%B1%A1"><span class="toc-text">什么是window对象? 什么是document对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#null%EF%BC%8Cundefined%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">null，undefined的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%EF%BC%8CIE%E4%B8%8E%E7%81%AB%E7%8B%90%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%86%92%E6%B3%A1%EF%BC%9F"><span class="toc-text">关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%88closure%EF%BC%89%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%83%EF%BC%9F"><span class="toc-text">什么是闭包（closure），为什么要用它？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#javascript-%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E2%80%9Duse-strict%E2%80%9D-%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D-%E4%BD%BF%E7%94%A8%E5%AE%83%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%B1%9E%E4%BA%8E%E6%9F%90%E4%B8%AA%E7%B1%BB%EF%BC%9F"><span class="toc-text">如何判断一个对象是否属于某个类？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E5%91%A2"><span class="toc-text">new操作符具体干了什么呢?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%B8%AD%EF%BC%8C%E6%89%A7%E8%A1%8C%E6%97%B6%E5%AF%B9%E8%B1%A1%E6%9F%A5%E6%89%BE%E6%97%B6%EF%BC%8C%E6%B0%B8%E8%BF%9C%E4%B8%8D%E4%BC%9A%E5%8E%BB%E6%9F%A5%E6%89%BE%E5%8E%9F%E5%9E%8B%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="toc-text">Javascript中，执行时对象查找时，永远不会去查找原型的函数？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9JSON%E7%9A%84%E4%BA%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">对JSON的了解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-text">JS延迟加载的方式有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">同步和异步的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E7%BC%96%E7%A0%81%E5%92%8C%E8%A2%AB%E8%AF%B7%E6%B1%82%E7%9A%84%E8%B5%84%E6%BA%90%E7%BC%96%E7%A0%81%E5%A6%82%E6%9E%9C%E4%B8%8D%E4%B8%80%E8%87%B4%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%EF%BC%9F"><span class="toc-text">页面编码和被请求的资源编码如果不一致如何处理？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-text">模块化开发怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AMD%EF%BC%88Modules-Asynchronous-Definition%EF%BC%89%E3%80%81CMD%EF%BC%88Common-Module-Definition%EF%BC%89%E8%A7%84%E8%8C%83%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#requireJS%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%EF%BC%88%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%A4%9A%E6%AC%A1%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E7%BC%93%E5%AD%98%E7%9A%84%EF%BC%9F%EF%BC%89"><span class="toc-text">requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#call%E5%92%8Capply"><span class="toc-text">call和apply</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#documen-write%E5%92%8C-innerHTML%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">documen.write和 innerHTML的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98"><span class="toc-text">回流与重绘</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM%E6%93%8D%E4%BD%9C"><span class="toc-text">DOM操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95%EF%BC%8C%E5%88%97%E4%B8%BE%E4%B8%80%E4%B8%8B"><span class="toc-text">数组对象有哪些原生方法，列举一下</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%82%A3%E4%BA%9B%E6%93%8D%E4%BD%9C%E4%BC%9A%E9%80%A0%E6%88%90%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="toc-text">那些操作会造成内存泄漏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFCookie-%E9%9A%94%E7%A6%BB%EF%BC%9F%EF%BC%88%E6%88%96%E8%80%85%EF%BC%9A%E8%AF%B7%E6%B1%82%E8%B5%84%E6%BA%90%E7%9A%84%E6%97%B6%E5%80%99%E4%B8%8D%E8%A6%81%E5%B8%A6cookie%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%89"><span class="toc-text">什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E4%BA%8B%E4%BB%B6"><span class="toc-text">响应事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flash%E5%92%8Cjs%E9%80%9A%E8%BF%87%E4%BB%80%E4%B9%88%E7%B1%BB%E5%A6%82%E4%BD%95%E4%BA%A4%E4%BA%92"><span class="toc-text">flash和js通过什么类如何交互?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Flash%E4%B8%8EAjax%E5%90%84%E8%87%AA%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-text">Flash与Ajax各自的优缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E6%95%88%E7%9A%84javascript%E5%8F%98%E9%87%8F%E5%AE%9A%E4%B9%89%E8%A7%84%E5%88%99"><span class="toc-text">有效的javascript变量定义规则</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#XML%E4%B8%8EJSON%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">XML与JSON的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E4%B8%8EXML%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">HTML与XML的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E4%B8%8E%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7"><span class="toc-text">渐进增强与优雅降级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Web-Worker%E5%92%8CWeb-Socket%EF%BC%9F"><span class="toc-text">Web Worker和Web Socket？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">JS垃圾回收机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#web%E5%BA%94%E7%94%A8%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%BB%E5%8A%A8%E6%8E%A8%E9%80%81data%E5%88%B0%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-text">web应用从服务器主动推送data到客户端的方式？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AAcookie%EF%BC%9F"><span class="toc-text">如何删除一个cookie？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#attribute%E4%B8%8Eproperty%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">attribute与property的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E8%AF%B7%E6%B1%82%E7%9A%84%E9%A1%B5%E9%9D%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E7%8A%B6%E6%80%81%E9%97%AE%E9%A2%98%EF%BC%9F"><span class="toc-text">Ajax请求的页面历史记录状态问题？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E6%8A%96%E8%8A%82%E6%B5%81"><span class="toc-text">防抖节流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B"><span class="toc-text">模块化发展历程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E6%9C%BA%E5%88%B6%EF%BC%9A"><span class="toc-text">npm 模块安装机制：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-text">npm 实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES5%E7%9A%84%E7%BB%A7%E6%89%BF%E5%92%8CES6%E7%9A%84%E7%BB%A7%E6%89%BF%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">ES5的继承和ES6的继承有什么区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%88%96%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">定时器的执行顺序或机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
</div></main>
            <aside class="left-column">
              
              <div class="card card-author">
                
  <img 
    src="https://api2.mubu.com/v3/photo/654b368e-b847-4122-982c-86d90b3f5275.jpg" 
    class="author-img" 
    alt="author avatar">

<p class="author-name">霜序廿</p>
<p class="author-description">无限进步</p>
<div class="author-message">
  <a 
    class="author-posts-count" 
    href="/archives">
    <span>253</span>
    <span>文章</span>
  </a>
  <a 
    class="author-categories-count" 
    href="/categories">
    <span>6</span>
    <span>分类</span>
  </a>
  <a 
    class="author-tags-count" 
    href="/tags">
    <span>51</span>
    <span>标签</span>
  </a>
</div>

  <div class="author-card-society">
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://github.com/shuangxunian">
          <i class="iconfont icon-github society-icon"></i>
        </a>
      </div>
    
      <div class="author-card-society-icon">
        <a target="_blank" rel="noopener" href="https://space.bilibili.com/391117803">
          <i class="iconfont icon-bilibili society-icon"></i>
        </a>
      </div>
    
  </div>

              </div>
               <div class="sticky-tablet">
  
  
    <article class="display-when-two-columns spacer">
      <div class="card card-content toc-card">
        <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8DJavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">介绍JavaScript的基本数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B4%E8%AF%B4%E5%86%99JavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A7%84%E8%8C%83%EF%BC%9F"><span class="toc-text">说说写JavaScript的基本规范？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jQuery%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE"><span class="toc-text">jQuery使用建议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E4%BD%BF%E7%94%A8"><span class="toc-text">Ajax使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E6%9C%89%E5%87%A0%E7%A7%8D%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%80%BC%EF%BC%9F%E4%BD%A0%E8%83%BD%E7%94%BB%E4%B8%80%E4%B8%8B%E4%BB%96%E4%BB%AC%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%BE%E5%90%97%EF%BC%9F"><span class="toc-text">JavaScript有几种类型的值？你能画一下他们的内存图吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E5%92%8C%E5%A0%86%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">栈和堆的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%BD%9C%E7%94%A8%E9%93%BE%E5%9F%9F"><span class="toc-text">Javascript作用链域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%88%E8%B0%88this%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-text">谈谈this的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#eval%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F"><span class="toc-text">eval是做什么的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFwindow%E5%AF%B9%E8%B1%A1-%E4%BB%80%E4%B9%88%E6%98%AFdocument%E5%AF%B9%E8%B1%A1"><span class="toc-text">什么是window对象? 什么是document对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#null%EF%BC%8Cundefined%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">null，undefined的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%EF%BC%8CIE%E4%B8%8E%E7%81%AB%E7%8B%90%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%86%92%E6%B3%A1%EF%BC%9F"><span class="toc-text">关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%88closure%EF%BC%89%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%83%EF%BC%9F"><span class="toc-text">什么是闭包（closure），为什么要用它？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#javascript-%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E2%80%9Duse-strict%E2%80%9D-%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D-%E4%BD%BF%E7%94%A8%E5%AE%83%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%B1%9E%E4%BA%8E%E6%9F%90%E4%B8%AA%E7%B1%BB%EF%BC%9F"><span class="toc-text">如何判断一个对象是否属于某个类？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E5%91%A2"><span class="toc-text">new操作符具体干了什么呢?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%B8%AD%EF%BC%8C%E6%89%A7%E8%A1%8C%E6%97%B6%E5%AF%B9%E8%B1%A1%E6%9F%A5%E6%89%BE%E6%97%B6%EF%BC%8C%E6%B0%B8%E8%BF%9C%E4%B8%8D%E4%BC%9A%E5%8E%BB%E6%9F%A5%E6%89%BE%E5%8E%9F%E5%9E%8B%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="toc-text">Javascript中，执行时对象查找时，永远不会去查找原型的函数？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9JSON%E7%9A%84%E4%BA%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">对JSON的了解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-text">JS延迟加载的方式有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">同步和异步的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E7%BC%96%E7%A0%81%E5%92%8C%E8%A2%AB%E8%AF%B7%E6%B1%82%E7%9A%84%E8%B5%84%E6%BA%90%E7%BC%96%E7%A0%81%E5%A6%82%E6%9E%9C%E4%B8%8D%E4%B8%80%E8%87%B4%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%EF%BC%9F"><span class="toc-text">页面编码和被请求的资源编码如果不一致如何处理？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-text">模块化开发怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AMD%EF%BC%88Modules-Asynchronous-Definition%EF%BC%89%E3%80%81CMD%EF%BC%88Common-Module-Definition%EF%BC%89%E8%A7%84%E8%8C%83%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#requireJS%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%EF%BC%88%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%A4%9A%E6%AC%A1%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E7%BC%93%E5%AD%98%E7%9A%84%EF%BC%9F%EF%BC%89"><span class="toc-text">requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#call%E5%92%8Capply"><span class="toc-text">call和apply</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#documen-write%E5%92%8C-innerHTML%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">documen.write和 innerHTML的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98"><span class="toc-text">回流与重绘</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM%E6%93%8D%E4%BD%9C"><span class="toc-text">DOM操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95%EF%BC%8C%E5%88%97%E4%B8%BE%E4%B8%80%E4%B8%8B"><span class="toc-text">数组对象有哪些原生方法，列举一下</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%82%A3%E4%BA%9B%E6%93%8D%E4%BD%9C%E4%BC%9A%E9%80%A0%E6%88%90%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="toc-text">那些操作会造成内存泄漏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFCookie-%E9%9A%94%E7%A6%BB%EF%BC%9F%EF%BC%88%E6%88%96%E8%80%85%EF%BC%9A%E8%AF%B7%E6%B1%82%E8%B5%84%E6%BA%90%E7%9A%84%E6%97%B6%E5%80%99%E4%B8%8D%E8%A6%81%E5%B8%A6cookie%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%89"><span class="toc-text">什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E4%BA%8B%E4%BB%B6"><span class="toc-text">响应事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flash%E5%92%8Cjs%E9%80%9A%E8%BF%87%E4%BB%80%E4%B9%88%E7%B1%BB%E5%A6%82%E4%BD%95%E4%BA%A4%E4%BA%92"><span class="toc-text">flash和js通过什么类如何交互?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Flash%E4%B8%8EAjax%E5%90%84%E8%87%AA%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-text">Flash与Ajax各自的优缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E6%95%88%E7%9A%84javascript%E5%8F%98%E9%87%8F%E5%AE%9A%E4%B9%89%E8%A7%84%E5%88%99"><span class="toc-text">有效的javascript变量定义规则</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#XML%E4%B8%8EJSON%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">XML与JSON的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E4%B8%8EXML%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">HTML与XML的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E4%B8%8E%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7"><span class="toc-text">渐进增强与优雅降级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Web-Worker%E5%92%8CWeb-Socket%EF%BC%9F"><span class="toc-text">Web Worker和Web Socket？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">JS垃圾回收机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#web%E5%BA%94%E7%94%A8%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%BB%E5%8A%A8%E6%8E%A8%E9%80%81data%E5%88%B0%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-text">web应用从服务器主动推送data到客户端的方式？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AAcookie%EF%BC%9F"><span class="toc-text">如何删除一个cookie？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#attribute%E4%B8%8Eproperty%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">attribute与property的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E8%AF%B7%E6%B1%82%E7%9A%84%E9%A1%B5%E9%9D%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E7%8A%B6%E6%80%81%E9%97%AE%E9%A2%98%EF%BC%9F"><span class="toc-text">Ajax请求的页面历史记录状态问题？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E6%8A%96%E8%8A%82%E6%B5%81"><span class="toc-text">防抖节流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B"><span class="toc-text">模块化发展历程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E6%9C%BA%E5%88%B6%EF%BC%9A"><span class="toc-text">npm 模块安装机制：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-text">npm 实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES5%E7%9A%84%E7%BB%A7%E6%89%BF%E5%92%8CES6%E7%9A%84%E7%BB%A7%E6%89%BF%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">ES5的继承和ES6的继承有什么区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%88%96%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">定时器的执行顺序或机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
      </div>
    </article>
  
  
  <article class="card card-content categories-widget">
    <div class="categories-card">
  <div class="categories-header">
    <i 
      class="iconfont icon-fenlei" 
      style="padding-right: 2px;">
    </i>分类
  </div>
  <div class="categories-list">
    
      <a href="/categories/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/">
        <div class="categories-list-item">
          技术文章
          <span class="categories-list-item-badge">218</span>
        </div>
      </a>
    
      <a href="/categories/%E5%85%B6%E4%BB%96/">
        <div class="categories-list-item">
          其他
          <span class="categories-list-item-badge">16</span>
        </div>
      </a>
    
      <a href="/categories/%E6%97%85%E6%B8%B8/">
        <div class="categories-list-item">
          旅游
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
      <a href="/categories/%E7%AE%97%E6%B3%95/">
        <div class="categories-list-item">
          算法
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E8%80%83%E8%AF%95/">
        <div class="categories-list-item">
          考试
          <span class="categories-list-item-badge">8</span>
        </div>
      </a>
    
      <a href="/categories/%E9%98%85%E8%AF%BB/">
        <div class="categories-list-item">
          阅读
          <span class="categories-list-item-badge">1</span>
        </div>
      </a>
    
  </div>
</div>
  </article>
  
  <article class="card card-content tags-widget">
    <div class="tags-card">
  <div class="tags-header">
    <i 
      class="iconfont icon-biaoqian" 
      style="padding-right: 2px;">
    </i>热门标签
  </div>
  <div class="tags-list">
    
      <a 
        href="/tags/js/" 
        title="js">
        <div class="tags-list-item">js</div>
      </a>
    
      <a 
        href="/tags/vue/" 
        title="vue">
        <div class="tags-list-item">vue</div>
      </a>
    
      <a 
        href="/tags/%E9%9D%A2%E8%AF%95/" 
        title="面试">
        <div class="tags-list-item">面试</div>
      </a>
    
      <a 
        href="/tags/css/" 
        title="css">
        <div class="tags-list-item">css</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C/" 
        title="网络">
        <div class="tags-list-item">网络</div>
      </a>
    
      <a 
        href="/tags/%E5%85%B6%E4%BB%96/" 
        title="其他">
        <div class="tags-list-item">其他</div>
      </a>
    
      <a 
        href="/tags/%E7%AE%97%E6%B3%95/" 
        title="算法">
        <div class="tags-list-item">算法</div>
      </a>
    
      <a 
        href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8/" 
        title="浏览器">
        <div class="tags-list-item">浏览器</div>
      </a>
    
      <a 
        href="/tags/html/" 
        title="html">
        <div class="tags-list-item">html</div>
      </a>
    
      <a 
        href="/tags/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/" 
        title="操作系统">
        <div class="tags-list-item">操作系统</div>
      </a>
    
      <a 
        href="/tags/%E8%80%83%E8%AF%95/" 
        title="考试">
        <div class="tags-list-item">考试</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AF%E5%AE%9E%E5%8A%9B/" 
        title="软实力">
        <div class="tags-list-item">软实力</div>
      </a>
    
      <a 
        href="/tags/DOM/" 
        title="DOM">
        <div class="tags-list-item">DOM</div>
      </a>
    
      <a 
        href="/tags/%E8%BD%AE%E5%AD%90/" 
        title="轮子">
        <div class="tags-list-item">轮子</div>
      </a>
    
      <a 
        href="/tags/%E7%BD%91%E7%BB%9C%E5%8E%9F%E7%90%86/" 
        title="网络原理">
        <div class="tags-list-item">网络原理</div>
      </a>
    
      <a 
        href="/tags/debug/" 
        title="debug">
        <div class="tags-list-item">debug</div>
      </a>
    
  </div>
</div>
  </article>
  
  
</div>
            </aside>
            <aside class="right-column">
              <div class="sticky-widescreen">
  
  
    <article class="card card-content toc-card">
      <div class="toc-header">
  <i 
    class="iconfont icon-menu" 
    style="padding-right: 2px;">
  </i>目录
</div>
<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%8B%E7%BB%8DJavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B"><span class="toc-text">介绍JavaScript的基本数据类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AF%B4%E8%AF%B4%E5%86%99JavaScript%E7%9A%84%E5%9F%BA%E6%9C%AC%E8%A7%84%E8%8C%83%EF%BC%9F"><span class="toc-text">说说写JavaScript的基本规范？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jQuery%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE"><span class="toc-text">jQuery使用建议</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E4%BD%BF%E7%94%A8"><span class="toc-text">Ajax使用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript%E6%9C%89%E5%87%A0%E7%A7%8D%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%80%BC%EF%BC%9F%E4%BD%A0%E8%83%BD%E7%94%BB%E4%B8%80%E4%B8%8B%E4%BB%96%E4%BB%AC%E7%9A%84%E5%86%85%E5%AD%98%E5%9B%BE%E5%90%97%EF%BC%9F"><span class="toc-text">JavaScript有几种类型的值？你能画一下他们的内存图吗？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A0%88%E5%92%8C%E5%A0%86%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">栈和堆的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%BD%9C%E7%94%A8%E9%93%BE%E5%9F%9F"><span class="toc-text">Javascript作用链域</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B0%88%E8%B0%88this%E7%9A%84%E7%90%86%E8%A7%A3"><span class="toc-text">谈谈this的理解</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#eval%E6%98%AF%E5%81%9A%E4%BB%80%E4%B9%88%E7%9A%84%EF%BC%9F"><span class="toc-text">eval是做什么的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFwindow%E5%AF%B9%E8%B1%A1-%E4%BB%80%E4%B9%88%E6%98%AFdocument%E5%AF%B9%E8%B1%A1"><span class="toc-text">什么是window对象? 什么是document对象?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#null%EF%BC%8Cundefined%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">null，undefined的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%B3%E4%BA%8E%E4%BA%8B%E4%BB%B6%EF%BC%8CIE%E4%B8%8E%E7%81%AB%E7%8B%90%E7%9A%84%E4%BA%8B%E4%BB%B6%E6%9C%BA%E5%88%B6%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F-%E5%A6%82%E4%BD%95%E9%98%BB%E6%AD%A2%E5%86%92%E6%B3%A1%EF%BC%9F"><span class="toc-text">关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E9%97%AD%E5%8C%85%EF%BC%88closure%EF%BC%89%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%E5%AE%83%EF%BC%9F"><span class="toc-text">什么是闭包（closure），为什么要用它？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#javascript-%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E2%80%9Duse-strict%E2%80%9D-%E6%98%AF%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D-%E4%BD%BF%E7%94%A8%E5%AE%83%E5%8C%BA%E5%88%AB%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F"><span class="toc-text">javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E5%B1%9E%E4%BA%8E%E6%9F%90%E4%B8%AA%E7%B1%BB%EF%BC%9F"><span class="toc-text">如何判断一个对象是否属于某个类？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#new%E6%93%8D%E4%BD%9C%E7%AC%A6%E5%85%B7%E4%BD%93%E5%B9%B2%E4%BA%86%E4%BB%80%E4%B9%88%E5%91%A2"><span class="toc-text">new操作符具体干了什么呢?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Javascript%E4%B8%AD%EF%BC%8C%E6%89%A7%E8%A1%8C%E6%97%B6%E5%AF%B9%E8%B1%A1%E6%9F%A5%E6%89%BE%E6%97%B6%EF%BC%8C%E6%B0%B8%E8%BF%9C%E4%B8%8D%E4%BC%9A%E5%8E%BB%E6%9F%A5%E6%89%BE%E5%8E%9F%E5%9E%8B%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%9F"><span class="toc-text">Javascript中，执行时对象查找时，永远不会去查找原型的函数？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9JSON%E7%9A%84%E4%BA%86%E8%A7%A3%EF%BC%9F"><span class="toc-text">对JSON的了解？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E7%9A%84%E6%96%B9%E5%BC%8F%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><span class="toc-text">JS延迟加载的方式有哪些？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%8C%E6%AD%A5%E5%92%8C%E5%BC%82%E6%AD%A5%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">同步和异步的区别?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E7%BC%96%E7%A0%81%E5%92%8C%E8%A2%AB%E8%AF%B7%E6%B1%82%E7%9A%84%E8%B5%84%E6%BA%90%E7%BC%96%E7%A0%81%E5%A6%82%E6%9E%9C%E4%B8%8D%E4%B8%80%E8%87%B4%E5%A6%82%E4%BD%95%E5%A4%84%E7%90%86%EF%BC%9F"><span class="toc-text">页面编码和被请求的资源编码如果不一致如何处理？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%BC%80%E5%8F%91%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%9F"><span class="toc-text">模块化开发怎么做？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#AMD%EF%BC%88Modules-Asynchronous-Definition%EF%BC%89%E3%80%81CMD%EF%BC%88Common-Module-Definition%EF%BC%89%E8%A7%84%E8%8C%83%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">AMD（Modules&#x2F;Asynchronous-Definition）、CMD（Common Module Definition）规范区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#requireJS%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F%EF%BC%88%E5%A6%82%E4%BD%95%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E9%81%BF%E5%85%8D%E5%A4%9A%E6%AC%A1%E5%8A%A0%E8%BD%BD%E7%9A%84%EF%BC%9F%E5%A6%82%E4%BD%95%E7%BC%93%E5%AD%98%E7%9A%84%EF%BC%9F%EF%BC%89"><span class="toc-text">requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何缓存的？）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#call%E5%92%8Capply"><span class="toc-text">call和apply</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#documen-write%E5%92%8C-innerHTML%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-text">documen.write和 innerHTML的区别</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98"><span class="toc-text">回流与重绘</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#DOM%E6%93%8D%E4%BD%9C"><span class="toc-text">DOM操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%95%B0%E7%BB%84%E5%AF%B9%E8%B1%A1%E6%9C%89%E5%93%AA%E4%BA%9B%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95%EF%BC%8C%E5%88%97%E4%B8%BE%E4%B8%80%E4%B8%8B"><span class="toc-text">数组对象有哪些原生方法，列举一下</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%82%A3%E4%BA%9B%E6%93%8D%E4%BD%9C%E4%BC%9A%E9%80%A0%E6%88%90%E5%86%85%E5%AD%98%E6%B3%84%E6%BC%8F"><span class="toc-text">那些操作会造成内存泄漏</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFCookie-%E9%9A%94%E7%A6%BB%EF%BC%9F%EF%BC%88%E6%88%96%E8%80%85%EF%BC%9A%E8%AF%B7%E6%B1%82%E8%B5%84%E6%BA%90%E7%9A%84%E6%97%B6%E5%80%99%E4%B8%8D%E8%A6%81%E5%B8%A6cookie%E6%80%8E%E4%B9%88%E5%81%9A%EF%BC%89"><span class="toc-text">什么是Cookie 隔离？（或者：请求资源的时候不要带cookie怎么做）</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%93%8D%E5%BA%94%E4%BA%8B%E4%BB%B6"><span class="toc-text">响应事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#flash%E5%92%8Cjs%E9%80%9A%E8%BF%87%E4%BB%80%E4%B9%88%E7%B1%BB%E5%A6%82%E4%BD%95%E4%BA%A4%E4%BA%92"><span class="toc-text">flash和js通过什么类如何交互?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Flash%E4%B8%8EAjax%E5%90%84%E8%87%AA%E7%9A%84%E4%BC%98%E7%BC%BA%E7%82%B9%EF%BC%9F"><span class="toc-text">Flash与Ajax各自的优缺点？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%89%E6%95%88%E7%9A%84javascript%E5%8F%98%E9%87%8F%E5%AE%9A%E4%B9%89%E8%A7%84%E5%88%99"><span class="toc-text">有效的javascript变量定义规则</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#XML%E4%B8%8EJSON%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">XML与JSON的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#HTML%E4%B8%8EXML%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">HTML与XML的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA%E4%B8%8E%E4%BC%98%E9%9B%85%E9%99%8D%E7%BA%A7"><span class="toc-text">渐进增强与优雅降级</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Web-Worker%E5%92%8CWeb-Socket%EF%BC%9F"><span class="toc-text">Web Worker和Web Socket？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JS%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">JS垃圾回收机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#web%E5%BA%94%E7%94%A8%E4%BB%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%BB%E5%8A%A8%E6%8E%A8%E9%80%81data%E5%88%B0%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%9F"><span class="toc-text">web应用从服务器主动推送data到客户端的方式？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4%E4%B8%80%E4%B8%AAcookie%EF%BC%9F"><span class="toc-text">如何删除一个cookie？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#attribute%E4%B8%8Eproperty%E7%9A%84%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">attribute与property的区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Ajax%E8%AF%B7%E6%B1%82%E7%9A%84%E9%A1%B5%E9%9D%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E7%8A%B6%E6%80%81%E9%97%AE%E9%A2%98%EF%BC%9F"><span class="toc-text">Ajax请求的页面历史记录状态问题？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%B2%E6%8A%96%E8%8A%82%E6%B5%81"><span class="toc-text">防抖节流</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96%E5%8F%91%E5%B1%95%E5%8E%86%E7%A8%8B"><span class="toc-text">模块化发展历程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E6%A8%A1%E5%9D%97%E5%AE%89%E8%A3%85%E6%9C%BA%E5%88%B6%EF%BC%9A"><span class="toc-text">npm 模块安装机制：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#npm-%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86"><span class="toc-text">npm 实现原理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#ES5%E7%9A%84%E7%BB%A7%E6%89%BF%E5%92%8CES6%E7%9A%84%E7%BB%A7%E6%89%BF%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F"><span class="toc-text">ES5的继承和ES6的继承有什么区别？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%E6%88%96%E6%9C%BA%E5%88%B6%EF%BC%9F"><span class="toc-text">定时器的执行顺序或机制？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8F%82%E8%80%83%E9%93%BE%E6%8E%A5"><span class="toc-text">参考链接</span></a></li></ol>
    </article>
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    <i 
      class="iconfont icon-wenzhang_huaban" 
      style="padding-right: 2px;">
    </i>最近文章
  </div>
  <div class="recent-posts-list">
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-05-01</div>
        <a href="/2022/05/01/typescriptHome/"><div class="recent-posts-item-content">typescript</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptTheVariousWaysAndAdvantagesAndDisadvantagesOfDeepInheritance/"><div class="recent-posts-item-content">JavaScript深入之继承的多种方式和优缺点</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptGoFromPrototypeToPrototypeChain/"><div class="recent-posts-item-content">JavaScript深入之从原型到原型链</div></a>
      </div>
    
      <div class="recent-posts-item">
        <div class="recent-posts-item-title">2022-01-15</div>
        <a href="/2022/01/15/javaScriptMemoryLeakTutorial/"><div class="recent-posts-item-content">JavaScript 内存泄漏教程</div></a>
      </div>
    
  </div>
</div>
  </article>
  
  
  
  <article class="card card-content">
    <div class="recent-posts-card">
  <div class="recent-posts-header">
    关注嘉然！顿顿解馋！
  </div>
  <div class="recent-posts-list">
    
      <img 
        src="https://api2.mubu.com/v3/document_image/2697c6ae-10ee-41a3-9099-304bdb252d31-3807603.jpg" 
        class="myadd-img" 
        alt="author avatar">
    
  </div>
</div>
  </article>
</div>
            </aside>
          </div>
        </div>
      </div>
    </div>
     
    <footer class="footer">
  <div class="footer-container">
    <div>
      <div class="footer-dsc">
        <span>
          Copyright ©
          
            2020 -
          
          2022
        </span>
        &nbsp;
        <a 
          href="/" 
          class="footer-link">
          霜序廿的个人网站
        </a>
      </div>
    </div>

    
      <div class="footer-dsc">
        
          Powered by
          <a 
            href="https://hexo.io/" 
            class="footer-link" 
            target="_blank" 
            rel="nofollow noopener noreferrer">
            &nbsp;Hexo
          </a>
        
        
          <span>&nbsp;|&nbsp;</span>
        
        
          Theme -
          <a 
            href="https://github.com/theme-kaze" 
            class="footer-link" 
            target="_blank"
            rel="nofollow noopener noreferrer">
            &nbsp;Kaze
          </a>
        
      </div>
    
    
    
    
</footer> 
    
  <a 
    role="button" 
    id="scrollbutton" 
    class="basebutton" 
    aria-label="回到顶部">
    <i class="iconfont icon-arrowleft button-icon"></i>
  </a>

<a 
  role="button" 
  id="menubutton" 
  class="basebutton">
  <i class="iconfont icon-menu button-icon"></i>
</a>
<a 
  role="button" 
  id="popbutton" 
  class="basebutton" 
  aria-label="控制中心">
  <i class="iconfont icon-expand button-icon"></i>
</a>
<a 
  role="button" 
  id="darkbutton" 
  class="basebutton darkwidget" 
  aria-label="夜色模式">
  <i class="iconfont icon-weather button-icon"></i>
</a>
<a 
  role="button" 
  id="searchbutton" 
  class="basebutton searchwidget" 
  aria-label="搜索">
  <i class="iconfont icon-search button-icon"></i>
</a> 
     
     
     
      <script>
  var addImgLayout = function () {
    var img = document.querySelectorAll('.post-content img')
    var i
    for (i = 0; i < img.length; i++) {
      var wrapper = document.createElement('a')
      wrapper.setAttribute('href', img[i].getAttribute('data-src'))
      wrapper.setAttribute('aria-label', 'illustration')
      wrapper.style.cssText =
        'width: 100%; display: flex; justify-content: center;'
      if (img[i].alt) wrapper.dataset.caption = img[i].alt
      wrapper.dataset.nolink = true
      img[i].before(wrapper)
      wrapper.append(img[i])
      var divWrap = document.createElement('div')
      divWrap.classList.add('gallery')
      wrapper.before(divWrap)
      divWrap.append(wrapper)
    }
    baguetteBox.run('.gallery')
  }
</script>
<script>
  loadScript(
    "/js/lib/lightbox/baguetteBox.min.js",
    addImgLayout
  )
</script>
 
     
     
    <script src="/js/main.js"></script> 
     
    
      <script>
        var addLazyload = function () {
          var observer = lozad('.lozad', {
            load: function (el) {
              el.srcset = el.getAttribute('data-src')
            },
            loaded: function (el) {
              el.classList.add('loaded')
            },
          })
          observer.observe()
        }
      </script>
      <script>
        loadScript('/js/lib/lozad.min.js', addLazyload)
      </script>
     
    
    
  </body>
</html>
